<template>
<div>      
  <el-button @click="Add" type="primary" icon="el-icon-plus" size="small">新 增</el-button><br/>
   <!-- <el-form :inline="true" :model="show.formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input size="small" v-model="show.formInline.user" placeholder="请输入地区名"></el-input>
            </el-form-item>
            <el-form-item label="登录状态">
                <el-select size="small" v-model="show.formInline.condition" placeholder="请选择">
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="search" type="warning" size="small" icon="el-icon-search">查 询</el-button>
            </el-form-item>
        </el-form> -->
    <el-table fit border :data="areas" v-loading="listLoading" style="width: 100%">
        <el-table-column align="center" type="index" label="编号" width="50">
         <template slot-scope="scope">
            {{ scope.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column align="center" label="地区">
            <template slot-scope="scope">
                {{scope.row.area}}
            </template>
        </el-table-column>
        <el-table-column prop="indentify" label="认证码">
        </el-table-column>
        
        <el-table-column align="center" label="操作" width="250" >
            <template slot-scope="scope">
                <el-button @click.native="Edit(scope.$index)" size="mini" icon="el-icon-edit" type="primary">编辑</el-button>
                <el-button @click="del(scope.$index)" size="mini" icon="el-icon-delete" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- <infoDialog :show="show"></infoDialog> -->
     <el-dialog :visible="show.centerDialogVisible"  :before-close="handleClose" center :title="!show.title?titleAdd:titleUpdate" width="40%">
        <el-form  label-position="right" label-width="180px" :model="updateinfo" :rules="rules">
            <el-form-item label="地区:" prop="area">
                <el-input class="Iwidth" v-model="updateinfo.area"></el-input>
            </el-form-item>
            <el-form-item label="认证码:" prop="indentify">
                <el-input class="Iwidth" v-model="updateinfo.indentify"><el-button type="primary" plain slot="append" @click="randomPassword()">更换</el-button></el-input>
            </el-form-item>
        </el-form><span slot="footer" class="dialog-footer">
            <el-button @click="show.centerDialogVisible = false" size="mini">取 消</el-button>
            <el-button v-show="show.showUpdate" @click="Update(1)" size="mini" type="primary">修 改</el-button>
            <el-button v-show="!show.showUpdate" @click="Update(2)" size="mini" type="primary">保 存</el-button>
        </span>
    </el-dialog>
    <div  style="float:right;margin:10px 0;">
    <el-pagination  @current-change="handleCurrentChange" :current-page.sync="areas.pageNumber" :page-size="areas.pageSize" layout="total, prev, pager, next, jumper" :total="areas.totalRow">
    </el-pagination>
</div>
</div>
</template>
<script>
import {
  // edit,
  // updateApi,
  // add,
  // del,
  getPageList
} from '@/api/table'
import fetch from '@/utils/fetch'
// import infoDialog from './Dialog'
// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      listLoading: false,
      centerDialogVisible: false,
      newInfo: {},
      titleAdd: '添加地区',
      titleUpdate: '修改地区信息',
      info: {},
      status: '',
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      areas: [],
      show: {
        centerDialogVisible: false,
        showUpdate: false,
        title: false,
        formInline: {
          user: '',
          condition: ''
        }
      },
      updateinfo: {}
    }
  },
  created() {
    this.getareas()
  },
  methods: {
    randomPassword(size = 6) {
      const seed = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p', 'Q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        '2', '3', '4', '5', '6', '7', '8', '9']// 数组
      const seedlength = seed.length// 数组长度
      var createPassword = ''
      for (let i = 0; i < size; i++) {
        const j = Math.floor(Math.random() * seedlength)
        createPassword += seed[j]
      }
      // debugger
      this.updateinfo = {
        id: this.updateinfo.id,
        indentify: createPassword,
        area: this.updateinfo.area
      }
    },
    search() {
      var p = {
        name: this.show.formInline.user,
        status: this.show.formInline.condition,
        curr: this.areas.pageNumber
      }
      fetch.get('/monitor/getAllArea', p).then((res) => {
        this.areas = res.content
      })
      // query(p).then(res => {
      //   this.areas = res.content
      // })
    },
    select() {
      this.updateinfo.status = this.status
    },
    Add() {
      this.updateinfo = {}
      this.randomPassword()
      this.show.centerDialogVisible = true
      this.show.showUpdate = false
    },
    handleClose(done) {
      this.updateinfo = {}
      done()
    },
    Update(i) {
      // console.log(i); // 修改按钮
      // console.log("‘·······"); // 修改按钮
      if (i === 1) {
        // console.log(i)// 修改按钮
        // console.log('this.updateinfo')
        // console.log(this.updateinfo)
        const a = {
          'id': this.updateinfo.id,
          'indentify': this.updateinfo.indentify,
          'area': this.updateinfo.area
        }
        fetch.get('/indentify/saveOrUpdateIndentify', { params: a }).then(res => {
          this.$message({
            message: res.content,
            type: 'success'
          })
          if (res.code === 0) {
            this.show.centerDialogVisible = false
            this.getareas()
          }
        })
      } else if (i === 2) {
        // console.log(i)// 保存按钮
        const a = {
          'indentify': this.updateinfo.indentify,
          'area': this.updateinfo.area
        }
        fetch.get('/indentify/saveOrUpdateIndentify', { params: a }).then(res => {
          this.$message({
            message: res.content,
            type: 'success'
          })
          if (res.code === 0) {
            this.show.centerDialogVisible = false
            this.getareas()
          }
        })
      }
    },
    del(index) {
      // alert(this.areas[index].id)
      // 根据id删除地区
      this.$confirm('此操作将删除该地区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(0);
          // console.log(this.areas.list[index]);
          fetch.get('indentify/del?id=' + this.areas[index].id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getareas()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    Edit(index) {
      // 根据id修改地区信息
      this.show.centerDialogVisible = true
      this.show.showUpdate = true

      this.updateinfo = {
        id: this.areas[index].id,
        indentify: this.areas[index].indentify,
        area: this.areas[index].area
      }
    },
    getareas() {
      // 获取地区列表
      this.listLoading = true
      fetch.get('/getAllArea').then(res => {
        this.areas = res.content
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      getPageList(
        this.show.formInline.user,
        this.show.formInline.condition,
        val
      ).then(res => {
        this.areas = {}
        this.areas = res.content
      })
    }
  }
}
</script>
<style scoped>

</style>
